<template>
    <div>
        <a-form-model
                hide-required-mark
                ref="baseInfoForm"
                :model="baseInfoForm"
                :label-col="labelCol"
                :wrapperCol="wrapperCol"
        >

            <a-form-model-item hasFeedback class="form-item" label="用户名" prop="username">
                <a-input v-model="baseInfoForm.username" style="width: 220px"/>
            </a-form-model-item>

            <a-form-model-item hasFeedback class="form-item" label="性别" prop="address">
                <a-radio-group v-model="baseInfoForm.gender">
                    <a-radio :value="1">
                        男
                    </a-radio>
                    <a-radio :value="0">
                        女
                    </a-radio>
                    <a-radio :value="2">
                        保密
                    </a-radio>
                </a-radio-group>
            </a-form-model-item>
            <a-form-model-item hasFeedback class="form-item" label="手机号" prop="mobile">
                <a-input readOnly v-model="baseInfoForm.mobile" style="width: 220px"></a-input>
            </a-form-model-item>
            <a-form-model-item hasFeedback class="form-item" label="邮箱" prop="email">
                <a-input readOnly v-model="baseInfoForm.email" style="width: 220px"></a-input>
            </a-form-model-item>
            <a-form-model-item class="form-item" label="生日" prop="birthday">
                <a-date-picker v-model="baseInfoForm.birthday"/>
            </a-form-model-item>
        </a-form-model>
        <a-button type="primary" style="text-align: center;margin-left: 150px;width: 200px;"
                  @click="saveInfo('baseInfoForm')"
        >保存
        </a-button>

    </div>
</template>

<script>
    import addressApi from "../../../api/info/addressApi";
    import userApi from "../../../api/user/userApi";

    export default {
        name: "baseInfoModel",
        data() {
            return {
                labelCol: {span: 4},
                wrapperCol: {span: 14},
                baseInfoForm: {
                    id: undefined,
                    username: "",
                    gender: "",
                    mobile: "",
                    email: "",
                    birthday: null,
                },
            }
        },
        created() {
            this.getBaseInfo();
        },
        methods: {
            saveInfo(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        userApi.updateBaseInfo(this.baseInfoForm.gender, this.baseInfoForm.birthday).then(resp => {
                            if (resp.data.flag) {
                                this.$message.success(resp.data.message)
                                this.getBaseInfo();
                            }
                        })
                        console.log(this.baseInfoForm)
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            getBaseInfo() {
                userApi.fetchBaseInfo().then(resp => {
                    if (resp.data.flag) {
                        this.baseInfoForm = resp.data.data
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>